<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background-image: url("./img/wallhaven-6dpro6.jpg");
      background-size: cover; /* 背景图片覆盖整个屏幕 */
      background-position: center; /* 居中显示背景图片 */
      height: 100vh; /* 设置body的高度等于浏览器窗口的高度 */
      background-repeat: no-repeat;
      overflow: hidden; /* 禁止页面滚动 */
    }
    .ht{
      text-align: center;
      color: cadetblue;
      font-family: 幼圆;
      margin-top: 80px;
    }
    .ht1{
      text-align: center;
      color: cadetblue;
      font-family: 幼圆;
    }
    .tab{
      width: 500px;
      border: 5px solid cadetblue;
      margin: 0px auto;
      border-radius: 5px;
      font-family: 幼圆;
    }
    .ltr td{
      border: 1px solid  powderblue;


    }
    .ipt{
      border: 0px;
      width: 50%;
      background-color: rgba(255, 255, 255, 0.2)
    }
    .btn1{
      border: 2px solid powderblue;
      border-radius: 4px;
      width:60px;
      background-color: antiquewhite;

    }

    .msg {
      color: gold;
    }

    .buttonContainer{
      text-align: center;
    }
  </style>

  <script>
    function checkUsername(){
      var usernameReg = /^[a-zA-Z0-9]{5,10}$/
      var usernameInput = document.getElementById("usernameInput")
      var username = usernameInput.value
      var usernameMsg = document.getElementById("usernameMsg")
      if(!usernameReg.test(username)){
        usernameMsg.innerText="格式有误"
        return false
      }
      var request = new XMLHttpRequest();
      request.onreadystatechange=function (){
        if (request.readyState==4 && request.status==200){
          var response = JSON.parse(request.responseText)
          console.log(response)
          if (response.code != 200){
            usernameMsg.innerText="已占用"
          }
        }
        //alert(request.responseText)
      }
      request.open("get","/user/checkUsernameUsed?username="+username,true)
      request.send();
      usernameMsg.innerText="OK"
      return true
    }


    function checkUserPwd(){
      var userPwdReg = /^\d{6}$/
      var userPwdInput = document.getElementById("userPwdInput")
      var userPwd = userPwdInput.value
      var userPwdMsg = document.getElementById("userPwdMsg")
      if(!userPwdReg.test(userPwd)){
        userPwdMsg.innerText="格式有误"
        return false
      }
      userPwdMsg.innerText="OK"
      return true
    }


    function checkReUserPwd(){
      var userPwdReg = /^\d{6}$/
      // 再次输入的密码的格式
      var reUserPwdInput = document.getElementById("reUserPwdInput")
      var reUserPwd = reUserPwdInput.value
      var reUserPwdMsg = document.getElementById("reUserPwdMsg")
      if(!userPwdReg.test(reUserPwd)){
        reUserPwdMsg.innerText="格式有误"
        return false
      }
      // 获得上次密码,对比两次密码是否一致
      var userPwdInput = document.getElementById("userPwdInput")
      var userPwd = userPwdInput.value
      if(reUserPwd != userPwd){
        reUserPwdMsg.innerText="两次密码不一致"
        return false
      }
      reUserPwdMsg.innerText="OK"
      return true
    }


    function checkForm(){
      var flag1 = checkUsername()
      var flag2 = checkUserPwd()
      var flag3 = checkReUserPwd()

      return flag1 && flag2 && flag3
    }


  </script>



</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht1">请注册</h3>
<form method="post" action="/user/regist" onsubmit="return checkForm()">
  <table class="tab" cellspacing="0px">
    <tr class="ltr">
      <td>请输入账号</td>
      <td>
        <input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
        <span id="usernameMsg" class="msg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td>请输入密码</td>
      <td>
        <input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
        <span id="userPwdMsg" class="msg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td>确认密码</td>
      <td>
        <input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
        <span id="reUserPwdMsg" class="msg"></span>
      </td>
    </tr>
    <tr class="ltr">
      <td colspan="2" class="buttonContainer">
        <input class="btn1" type="submit" value="注册">
        <input class="btn1" type="reset" value="重置">
        <button class="btn1"><a  href="/login.html">去登录</a></button>
      </td>
    </tr>
  </table>

</form>
</body>
</html>